.modal-dialog
  .modal-content
    if view.state === 'purchasing'
      .alert.alert-info(data-i18n="buy_gems.purchasing")

    else if view.state === 'retrying'
      #retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying")

    else
      img#subscribe-background(src="/images/pages/play/modal/subscribe-background-blank.png")

      h1(data-i18n="subscribe.subscribe_modal_title")

      div#close-modal
        span.glyphicon.glyphicon-remove

      div.paper-area
        div.benefits-header.text-center(data-i18n="[html]subscribe.comparison_blurb")
          
            
        .container-fluid
          .row
            .col-xs-5.feature-col.col-xs-offset-1
              ul
                li(data-i18n="subscribe.feature_levels" data-i18n-options={premiumLevelsCount:view.i18nData.premiumLevelsCount})
                if view.basicProduct
                  li(data-i18n="subscribe.feature_gems", data-i18n-options={gems:view.basicProduct.get('gems')})
                li(data-i18n="subscribe.feature_heroes")
              
              
            .col-xs-5.feature-col
              ul
                li(data-i18n="subscribe.feature_games")
                li(data-i18n="subscribe.feature_websites")
                li(data-i18n="subscribe.feature_items")
                
          hr
          
          mixin price(name, p)
            - var origPrice = p.priceStringNoSymbol()
            - var salePrice = p.adjustedPriceStringNoSymbol()
            if origPrice == salePrice
              .price(data-i18n=name, data-i18n-options={price:origPrice})
            else
              div
                span.old-price(data-i18n=name, data-i18n-options={price:origPrice})
                span.price(data-i18n=name, data-i18n-options={price:salePrice})

          .row
            - var secondRowClass = '.col-xs-5'
            if view.basicProduct
              .col-xs-5.option-col.col-xs-offset-1
                .option-header.text-center(data-i18n="subscribe.stripe_description")
                +price("subscribe.month_price", view.basicProduct)
                button.btn.btn-lg.btn-illustrated.purchase-button Subscribe Now
              
            else
              - var secondRowClass = '.col-xs-12'
                
            if view.lifetimeProduct
              .option-col(class=secondRowClass)
                .option-header.text-center(data-i18n="subscribe.lifetime")
                +price("subscribe.lifetime_price", view.lifetimeProduct)
                button.btn.btn-lg.btn-illustrated.lifetime-button Buy Now
            
            if view.yearProduct
              .option-col(class=secondRowClass)
                .option-header.text-center(data-i18n="subscribe.year_subscription")
                +price("subscribe.year_price",view.yearProduct)
                button.btn.btn-lg.btn-illustrated.sale-button Buy Now

        p 
          span(data-i18n="subscribe.kids_message_1")
          =" "
          a.parent-link(data-i18n="subscribe.kids_message_2")
          
        p
          span(data-i18n="subscribe.support_part1")
          =" "
          a(href="mailto:support@codecombat.com", data-i18n="subscribe.support_part2")
          =" "
          span(data-i18n="subscribe.support_part3")




      if view.state === 'declined'
        #declined-alert.alert.alert-danger.alert-dismissible
          span(data-i18n="buy_gems.declined")
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") &times;

      if view.state === 'unknown_error'
        #error-alert.alert.alert-danger.alert-dismissible
          button.close(type="button" data-dismiss="alert")
            span(aria-hidden="true") &times;
          p(data-i18n="loading_error.unknown")
          p= view.stateMessage

    .parent-link-popover-content.hidden
      .email-parent-form
        p(data-i18n="subscribe.parent_email_description")
        form
          .form-group
            label(data-i18n="subscribe.parent_email_input_label")
            input.parent-input.form-control(type='email', data-i18n="[placeholder]subscribe.parent_email_input_placeholder")
            .parent-email-validator.email_invalid(data-i18n="subscribe.parent_email_input_invalid")
          button.parent-send.btn.btn-default(type='submit', data-i18n="subscribe.parent_email_send")
      .email-parent-complete
        p(data-i18n="subscribe.parent_email_sent")
        button.btn(type='button', onclick="$('.parent-link').popover('hide');", data-i18n="modal.close")
